<template>
  <el-form 
  label-position="right" 
  label-width="80px" 
  :model="myform"
  ref="ruleForm" 
  :rules="rules"
  class="myform"
  >
    <el-form-item label="用户名" prop="username">
      <el-input type="text" v-model="myform.username"></el-input>
    </el-form-item>
    <el-form-item label="电话号码" prop="mobile">
      <el-input type="text" v-model="myform.mobile"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="myform.password" show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="password2">
      <el-input type="password" v-model="myform.password2" show-password></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" class="anniu" @click="zhuCe">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {zhuce} from "@/api"
export default {
  data() {
    return {
      myform: {
        mobile:""
      },
      rules:{
          username:[
              { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          mobile:[
              { required: true, message: '请输入电话号码', trigger: 'blur' },
              {
                  validator:(rule,value,callback)=>{
                      var phoneReg = /^1(3|5|6|7|8|9)\d{9}$/
                      if(phoneReg.test(value)){
                          callback()
                      }else{
                          callback(new Error("请输入正确的手机号码"));
                      }
                  },
                  trigger:'blur'
              }
          ],
          password:[
              { required: true, message: '请输入密码', trigger: 'blur' },
              {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
          ],
          password2:[
              { required: true, message: '请再次输入密码', trigger: 'blur' },
              {
                  validator:(rule, value, callback)=>{
                      if(value !== this.myform.password){
                          callback(new Error('两次输入密码不一致!'));
                      }else{
                          callback()
                      }
                  },
                  trigger:'change'
              }
          ]
      }
    };
  },
  methods:{
      zhuCe(){
          this.$refs.ruleForm.validate((valid)=>{//表单校验,此处是前端拦截！！！
              if(valid){
                // console.log(this.myform);//此处是利用写好的rules对表单内容进行校验
                zhuce(this.myform)
                .then(res=>{
                    
                })
              }
          })
      }
  }
};
</script>

<style lang="scss" scoped>
.myform{
    padding-right:50px;
    padding-top:20px;
}
.anniu{
    width:100%;
}
</style>